<template>
  <el-tabs>
    <el-tab-pane>
      <template #label>
        <div style="padding-bottom: 10px;">
          <el-button :icon="payment" class="topButton"></el-button>
        <span>费用缴纳/查询</span>
        </div>
        
      </template>

<!-- <el-form >
    <el-form-item label="Activity name">
      <el-input v-model="moneyTest"/>
    </el-form-item>
   
  </el-form> -->

      <!-- 缴纳查询在这里 -->
      <div class="content">
        <div class="contentRight">

            <div class="contentRight-content">


              <div style="display: flex; flex-direction: column; padding-left: 15%;">
 

                  <div class="s1" >
                    
                    <div style=" display: flex;
                      align-items: center; justify-content: space-evenly;" class="functions">
                      <el-button @click="paymentButton(1)">缴费</el-button>
                    </div>

                    <div class="el-button1"><el-button :icon="water" class="el-button0"></el-button></div>
                    <div class="span1">
                      <span >水费</span>
                    </div>
                    <div class="span2" :class="amountClass(waterMoney,thresholdValue)">
                      <span >{{waterMoney}}</span>
                    </div>

                  </div>
                
                  
                  <div class="s1">

                    <div style=" display: flex;
                      align-items: center; justify-content: space-evenly;" class="functions">
                      <el-button @click="paymentButton(2)">缴费</el-button>
                    </div>
                    <div class="el-button1"><el-button :icon="electricity" class="el-button0"></el-button></div>                   
                    <div class="span1">
                      <span>电费</span>
                    </div> 
                    <div class="span2" :class="amountClass(powerRate,thresholdValue)">{{powerRate}}</div>
   
                  </div>

                  <div class="s1">

                    <div style=" display: flex;
                      align-items: center; justify-content: space-evenly;" class="functions">
                      <el-button @click="paymentButton(3)">缴费</el-button>
                    </div>
                  <div class="el-button1"><el-button :icon="gas" class="el-button0"></el-button></div>
                    <div class="span1">
                      <span>燃气费</span> 
                    </div>
                    <div class="span2" :class="amountClass(gasMoney,thresholdValue)">{{ gasMoney }}</div>
          
                  </div>
                
                  <div class="s1">   

                    <div style=" display: flex;
                      align-items: center; justify-content: space-evenly;" class="functions">
                      <el-button @click="paymentButton(4)">缴费</el-button>
                    </div>
                    <div class="el-button1" ><el-button :icon="money" class="el-button0"></el-button></div>
                    <div class="span1">
                      <span>物业费</span> 
                    </div>  
                    <div class="span2">
                      <span v-if="proMoney.value>=0">缴纳未到期</span>
                      <span v-else style="color: red;">待缴纳</span>
                    </div>
                  </div>
              </div>
              
              <!-- 当前余额、 当前电费/yuan/du 上次缴费日期。 本月用X量是否不太好做？  -->
              <div class="contentRight-contentBottom" style="height: 100%;
              width: 100%;">

                <div>
                  <bing></bing>
                </div>

              </div>


            </div>

        </div>
        <div class="contentLeft">

<div class="contentLeft-content" style="display: flex; flex-direction: column;">
    
 <div class="contentLeft-contentTop" style="height: 10%; display: flex;
  align-items: center;
  justify-content: center;">
  <h1>
    缴费表单
  </h1>

 </div>

  <!-- 附带充钱表单默认隐藏 。 paymentFromIsShow -->
  <div class="paymentForm2" style="width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  ">

    <el-form class="formContent" :model="form" label-width="auto"
    style="max-width: 500px;
    border: 0.667px black solid;
    width: 100%;
    height:100%;
    padding:8%; 
    ">
      <div>
        <el-form-item class="formLabel" label="姓名:">
          
          <el-input v-model="form.name" readonly disabled></el-input>

        </el-form-item>
      
      <el-form-item class="formLabel" label="房间号">
        <el-input v-model="houseNumber" readonly disabled></el-input>
      </el-form-item>
      <el-form-item class="formLabel" label="充值类型">
        <el-select v-model="form.type" placeholder="请选择" @change="typeChange">
          <el-option
            v-for="option in option1"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item class="formLabel" label="充值金额 :">

          <el-input v-model="form.money" type="number"></el-input>
      </el-form-item>

      <el-form-item class="formLabel" label="剩余金额 :">
          <el-input v-model="remainingAmount" type="number" readonly disabled :class="{'red-font': isNegative}"></el-input>
      </el-form-item>

      <el-form-item>
       
        <div style="width: 100%; display: flex; justify-content: space-evenly; margin-top:50px;">

          <el-button type="primary" @click="rechargeButton(form.type)" style="
          height:40px;
          width:150px;
          ">
            充值
          </el-button>
          <el-button type="primary"  @click="deletesButton" style="
          height:40px;
          width:150px;
          ">
            清空
          </el-button>

        </div>
        
      </el-form-item>
      </div>
      
    </el-form>
  </div>



</div>

      
      </div>
      </div>

      


    </el-tab-pane>
    <!-- 第二大部分 -->

      <el-tab-pane>
      
              <template #label>
          <div class="header" style="padding-top: 12.5px;">
            <el-button :icon="recording" class="topButton" style="background-color: transparent;"></el-button>
            <span style="margin-bottom: 8px;">历史记录</span>
          </div>
        </template>

        <div class="container">
          <div class="title">
            <span>历史记录</span>
          </div>

          <div class="recordingContent">
            <el-select v-model="selectedType" placeholder="请选择充值类型" @change="selectChange"
            class="select-box" style="font-size: 80px;">
              <el-option 
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-table :data="filteredData" style="margin-top: 20px;" >
              <el-table-column prop="tableDate"  label="日期" width="180px">
                <template #default="scope">
                  <span  style="font-size: 18px;" >{{ scope.row.tableDate }}  </span>
                </template>
              </el-table-column>
              <el-table-column prop="paymentMoney" label="充值金额（元）" width="250px">
                <template #default="scope">
                  <span  style="font-size: 18px;">{{ scope.row.paymentMoney }} 元 </span>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="充值类型" width="180px" >
                <template #default="scope">
                  <span v-if="scope.row.type === 1" style="font-size: 18px;">水费</span>
                  <span v-else-if="scope.row.type === 2" style="font-size: 18px;">电费</span>
                  <span v-else-if="scope.row.type === 3" style="font-size: 18px;">燃气费</span>
                  <span v-else-if="scope.row.type === 4" style="font-size: 18px;">物业费</span>
                </template>
              </el-table-column>
              <el-table-column  prop="houseNumber" label="房间号" width="220px">
                <span style="font-size: 14px;">{{ houseNumber }}</span>
              </el-table-column>
            </el-table>
          </div>
        </div>
    </el-tab-pane>


  </el-tabs>
</template>

<script setup>
/* import { ElMessageBox } from 'element-plus' */

import water from '@/components/property-lzm/water.vue'
  import electricity from '@/components/property-lzm/electricity.vue'
  import recording from '@/components/property-lzm/recording.vue'
  import gas from '@/components/property-lzm/gas.vue'
  import money from '@/components/property-lzm/money.vue'
  import payment from '@/components/property-lzm/payment.vue'

  import {ref ,computed,onMounted} from 'vue'
  import axios from 'axios'

  import bing from '@/views/pieChart-lzm-propertyChild/index.vue'
 /* 水费 电费 燃气费 物业费(传交没交够（Boolean）)阈值数 */

  let waterMoney = ref(40)
  let powerRate = ref(-150)
  let gasMoney = ref(-100)
  let proMoney = ref(1000)
  let propertyBoolean =ref(false)
  let thresholdValue = ref(30)
  /* Form1 */
  /* 标题 用电量某天用于展示折线图 上月用电量 用电数据用于展示折线图 */
  const form_title= ['用电详情','用水详情','用气详情',]

  let useElectricity =ref(12.9)
  let useElectricity_latTotal =ref(129.9)
  let Date = ref(1)
  let useElectricity_data = ref([{
    Date:'08-21',useElectricity:12.6},
    {Date:'08-22',useElectricity:4.3},
    {Date:'08-23',useElectricity:2.7},
    {Date:'08-25',useElectricity:14.1},
    {Date:'08-26',useElectricity:8.3},
    {Date:'08-27',useElectricity:11.7},
    {Date:'08-28',useElectricity:4.1},
    {Date:'08-29',useElectricity:9.3},
    {Date:'08-30',useElectricity:8.7},
    {Date:'08-31',useElectricity:5.1}
  ])
    /* 历史记录 */
    let tableData = ref([
  {tableDate: '08-23', paymentMoney: '100', type: 2},
  {tableDate: '08-24', paymentMoney: '1050', type: 3},
  {tableDate: '08-25', paymentMoney: '400', type: 1},
  {tableDate: '08-26', paymentMoney: '40', type: 3},
  {tableDate: '08-27', paymentMoney: '13', type: 1},
  {tableDate: '08-28', paymentMoney: '321', type: 3},
  {tableDate: '08-29', paymentMoney: '130', type: 1},
  {tableDate: '08-30', paymentMoney: '110', type: 2},
  {tableDate: '08-31', paymentMoney: '110', type: 1},
  {tableDate: '09-01', paymentMoney: '110', type: 2},
  {tableDate: '09-02', paymentMoney: '113', type: 4},
  {tableDate: '09-03', paymentMoney: '420', type: 1},
  {tableDate: '09-04', paymentMoney: '421', type: 2},
  {tableDate: '09-05', paymentMoney: '143', type: 3},
  {tableDate: '09-06', paymentMoney: '97', type: 2},
  {tableDate: '09-07', paymentMoney: '58', type: 1},
  {tableDate: '09-08', paymentMoney: '58', type: 4},
  {tableDate: '09-09', paymentMoney: '80', type: 4},
  {tableDate: '09-10', paymentMoney: '97', type: 1},
  {tableDate: '09-11', paymentMoney: '670', type: 2},
  {tableDate: '09-12', paymentMoney: '9', type: 2},
  {tableDate: '09-13', paymentMoney: '190', type: 1},
  {tableDate: '09-14', paymentMoney: '100', type: 1},
  {tableDate: '09-15', paymentMoney: '100', type: 4},
  {tableDate: '09-16', paymentMoney: '100', type: 1}
]);

  /* 下拉框 */
  const value = ref('')
    const options = [
      {
        value: null,
        label: '全部',
      },
      {
        value: 1,
        label: '水费',
        
      },
      {
        value: 2,
        label: '电费',
      },
      {
        value: 3,
        label: '燃气费',
      },
      {
        value: 4,
        label: '物业费',
      },
    ]

    const option1 = [
  { label: '水费', value: 1 },
  { label: '电费', value: 2 },
  { label: '煤气费', value: 3 },
  { label: '物业费', value: 4 },
];
     
  /* 付钱表单数据 */

  let paymentFromIsShow = ref(false)
  let moneyTest =ref(100)

// 动态计算类名的函数(可以设置阈值提醒)/* 多余 固定thresholdValue为30 */
const amountClass = (amount,thresholdValue) => {
  return computed(() => {
    if (amount >= thresholdValue) {
      return 'health-background';
    } else if (amount < thresholdValue&&amount>=0) {
      return 'warning-background';
    } else if(amount<0) {
      return 'danger-background';
    }
  }).value;
};
const selectedType = ref(1);
const filteredData = ref(tableData.value);
const selectChange = (value) => {
  try {
    filteredData.value = value !== null
      ? tableData.value.filter(item => item.type === value)
      : tableData.value;
  } catch (error) {
    console.error('Error updating filtered tableData:', error);
  }
};

function paymentButton(typeValue){
  if(typeValue==1){
    remainingAmount.value = waterMoney.value
  }
  else if(typeValue==2){
    remainingAmount.value = powerRate.value
  }
  else if(typeValue==3){
    remainingAmount.value = gasMoney.value
  }
  else if(typeValue==4){
    remainingAmount.value =proMoney.value
  }
  
  form.value.type = typeValue

}

   /*  *//* 下面是充值表单 *//*  */

// 定义表单数据
let form = ref({ name: "明明King", type: '', money: 100});
let remainingAmount = ref();
let houseNumber = ref('一幢C3单元11楼1102')
/* 一幢五单元九楼九零三 */


// 充值按钮点击事件处理函数
function rechargeButton(typeInt) {
  // 从表单数据中获取充值金额和剩余金额
  let money = parseFloat(form.value.money) || 0;
  let isTrue = ref(false)
  /* 
  ElMessageBox.confirm('Are you sure to close this dialog?') */

  // 检查充值金额是否不足
  if (remainingAmount.value + money <= 0) {
    alert("充值金额不足，请核对后提交");
  } else {
    if(typeInt==1){waterMoney.value = remainingAmount.value + money}
    if(typeInt==2){powerRate.value = remainingAmount.value + money}
    if(typeInt==3){gasMoney.value = remainingAmount.value + money}
    if(typeInt==4){proMoney.value = remainingAmount.value + money}
    remainingAmount.value = remainingAmount.value + money
   /*  console.dir(form) */
    /* let formdata =  new FormData();
    formdata.append(type,'typeInt')
    axios({

      url:'',
      method:'post',
      data:{

      }
    }).then((res)=>{
      alert("充值工程");

    })
  } */}
}
const isNegative = computed(() => remainingAmount.value < 0); // 计算属性用于检查 remainingAmount 是否小于 0
const typeChange = (value) => {
  paymentButton(value);
  if(value==1){
    remainingAmount.value = waterMoney.value
  }
  else if(value==2){
    remainingAmount.value = powerRate.value
  }
  else if(value==3){
    remainingAmount.value = gasMoney.value
  }



  /* 过会完善物业费逻辑 */
  /* else if(value==4){
    remainingAmount.value = property.value
  } */
  

  /* 更新余额 */
};

/* 图表 */
const mychart1 = ref(null);
const dates = useElectricity_data.value.map(item => item.Date);
const useElectricities = useElectricity_data.value.map(item => item.useElectricity);

const generateColors = (num) => {
  const colors = [];
  for (let i = 0; i < num; i++) {
    colors.push(`#${Math.floor(Math.random()*16777215).toString(16)}`);
  }
  return colors;
};

const data = {
  chartName: dates,
  chartRows: useElectricities,
  colorList: generateColors(useElectricities.length),
  yAxisLabel: '用电量/度'
};

const renderLineOptions = (yAxisLabel) => {
  return {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      name: '日期/7天',
      data: data.chartName,
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 15
        },
        rotate: 30,
        interval: 2
      }
    },
    yAxis: {
      name: yAxisLabel || data.yAxisLabel,
      nameTextStyle: {
        fontSize: 16
      },
      axisLabel: {
        show: true,
        fontSize: 16
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      }
    },
    series: [
      {
        data: data.chartRows,
        type: 'line',
        smooth: false,
        itemStyle: {
          color: (params) => {
            return data.colorList[params.dataIndex];
          }
        },
        label: {
          show: true,
          position: 'middle',
          fontSize: 14,
        },
        lineStyle: {
          width: 2,
          type: 'solid'
        }
      }
    ]
  };
};

const updateChart = (newData, yAxisLabel) => {
  data.chartName = newData.chartName;
  data.chartRows = newData.chartRows;
  data.colorList = generateColors(newData.chartRows.length);
  data.yAxisLabel = yAxisLabel || data.yAxisLabel;

  if (mychart1.value) {
    mychart1.value.setOption(renderLineOptions(data.yAxisLabel), true);
  }
};

const updateChartData = () => {
  const newData = {
    chartName: ['2024-08-01', '2024-08-02', '2024-08-03'], // 新日期数据
    chartRows: [120, 130, 110] // 新用电量数据
  };
  
  updateChart(newData, data.yAxisLabel); // 仅更新数据
};

const updateYAxisLabel = () => {
  const newYAxisLabel = '新的用电量/度'; // 新的 Y 轴标签
  updateChart({ chartName: data.chartName, chartRows: data.chartRows }, newYAxisLabel);
};

onMounted(() => {
  if (mychart1.value) {
    mychart1.value.setOption(renderLineOptions());
  }
});
function deletesButton (){
  remainingAmount.value=null;
  form.value.type='';
}

</script>

<style scoped lang="scss">
.red-font{
  color: red !important;
}

.formLabel .el-form-item__label{
                font-size:18px;
              }
  *{
    border:0;
    padding:0;
    box-sizing:border-box;
    
  }a{
    list-style: none;
    text-decoration: none; /* 去掉下划线 */
    color: inherit; /* 继承父元素的字体颜色 */
    font-weight: normal; /* 去掉粗体 */
    font-style: normal; /* 去掉斜体 */
    font-size: 12px; 
  }
  .danger-background{
    background-color:#f16c6d;
  }
  .health-background{
    background-color: #68c241;
  }
  .warning-background{
    background-color: #e3a242;
  }
  
  .topButton{
    height:48px;
    width:48px;
    font-size:36px ;
  }
  .el-button:hover{
      background-color:transparent; 
  }
  
  .content{
    display:flex;
    position: relative;
    height: auto;
    width: 100%;
    .contentLeft{
      flex:5;
      /* border:0.667px black solid; */

      .contentLeft-content{
        display: flex;
        height: 100%;
        width: 100%;
        .paymentForm1{
          width:87%;
          height:100%;
          margin:3% 10% 10% 3%;
          border: 0.667px black solid;

          .chart-container {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
              
          }
          
          .chart {
              width: 600px; /* 可以调整宽度 */
              height: 500px; /* 可以调整高度 */
          }

        }
        .formContent{
        margin-top:0% ;
          .el-form-item{
            margin-bottom: 25px;
            .el-button:hover{
                  background-color:#4f9dfc; 
              }
          }
        }
          
        
      }
    }
    .contentRight{
      flex:3;
      /* border:0.667px black solid; */
      .contentRight-content {
  height: 100%;
  padding: 20px 10% 30px 10px;
  margin-right: 10%;
  .s1 {
    border: 1px solid black;
    width: 100%; 
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 修改为 space-between 使内容两端对齐 */
    padding: 0 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    background: #f9f9f9; /* 更改背景颜色为淡灰色 */
    border-radius: 8px; /* 添加圆角 */
    .functions {
      border-right: 1px solid black;
      width: 25%; /* 减少宽度 */
      display: flex;
      align-items: center; /* 垂直居中对齐内容 */
      justify-content: center; /* 水平居中对齐内容 */
      .el-button {
        height: 32px; /* 调整高度 */
        width: 80%; /* 调整宽度 */
        font-size: 16px; /* 调整字体大小 */
        background: #68c241; /* 按钮背景颜色 */
        border: none; /* 去掉边框 */
        color: #fff; /* 按钮文字颜色 */
        margin: 0 5px; /* 增加按钮间距 */
        border-radius: 4px; /* 添加圆角 */
      }
    }
    .el-button1 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20%; /* 调整宽度 */
    }
    .el-button0 {
      height: 36px;
      width: 36px;
      font-size: 24px; /* 减小字体大小 */
      margin-left: 10px;
      color: #68c241; /* 按钮图标颜色 */
    }
    .span1 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      border-right: 0px solid black; /* 调整边框宽度 */
      span {
        font-size: 16px; /* 调整字体大小 */
      }
    }
    .span2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%; /* 调整宽度 */
      height: 50%;
    }
  }
}

    }
  }

  .container {
  width: 60%;
  margin: 0 auto; /* 居中容器 */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 10px; /* 圆角边框 */
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.header .topButton {
  margin-right: 10px;
}

.title {
  text-align: center;
  font-size: 24px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.recordingContent {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  background-color: #f9f9f9;
}

.select-box {
  width: 100%; /* 使下拉选择框宽度适应容器 */
  margin-bottom: 20px; /* 增加选择框和表格之间的间距 */
}
</style>

